<script setup>
import Chart1 from './components/Chart1.vue'
import Chart2 from './components/Chart2.vue'
import ChartC from './components/ChartCombo.vue'
import ChartM from './components/ChartMonth.vue'
import MonthPicker from './components/MonthPicker.vue'
</script>

<template>
  <div id="areab" style="width: 1920px; height: 600px; position: absolute; top: 300px; left: 0px;">
    <div id="ny" style="position: absolute; top: 0px; left: 400px; z-index: 7;">
      <MonthPicker />
    </div>
    <div id="b1" style="width: 640px;height:600px; position: absolute; top: 0px; left: 0px">
      <Chart2 />
    </div>
    <div id="bc" style="width: 640px;height:600px; position: absolute; top: 0px; left: 641px">
      <ChartC />
    </div>
    <div id="b2" style="width: 640px;height:600px; position: absolute; top: 0px; left: 1281px">
      <Chart1 />
    </div>
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1280px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
